<template>
	<view style="background-color: #ECECEC; width: 100%; height: 100%;">
		<!-- 多少商品循环多少次 -->
		<view class="shopcart" v-for="(item, index) in list" :key="index">
			<!-- 选择图标部分 -->
			<view class="select">
				<!-- 点击切换图片样式 -->
				<image
					:src="pic_icon"
					mode="scaleToFill"
					@click="icon_visible = !icon_visible"
				></image>
				<!-- <image
					src="../../static/image/selected.png"
					mode="scaleToFill"
					@click="choose(index)"
				></image> -->
			</view>
			<view class="img">
				<image :src="item.pic" mode="scaleToFill"></image>
			</view>
			<!-- 购物车详细信息 -->
			<view class="info">
				<text>{{ item.title }}</text>
				<text>{{ item.spec }}</text>
				<!-- 价格加按钮 -->
				<view class="">
					<!-- 价格 -->
					<text>￥{{ item.price }}</text>
					<!-- 按钮,加减价格 -->
					<van-stepper :value="item.count" />
				</view>
				<view class="" style="position: relative;">
					<!-- 删除 -->
					<image
						src="../../static/image/del.png"
						mode=""
						style="width: 60rpx;height: 60rpx;position: absolute;left: 342rpx;"
						@click="del(index)"
					></image>
				</view>
			</view>
		</view>
		<!-- 提交栏目 -->
		<!-- bind:submit="onClickButton" 绑定事件 -->
		<van-submit-bar
			:price="totalPrice * 100"
			button-text="提交订单"
			bind:submit="onSubmit"
		></van-submit-bar>
	</view>
</template>

<script>
// import { mapState } from 'vuex';
// import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			val: 1,
			//设置一个空数组来装将要加入vuex里面购物车数组的数据
			list: [],
			// 是否全选
			checked: '',
			icon_visible: false
		};
	},
	methods: {
		// ...mapMutations({'setBadge'})
		// 选择的图标变换
		//删除
		del(i) {
			this.list.splice(i, 1);

			console.log(this.list.length);
			this.$store.commit('setShop', this.list);
		},
		//监视步进器的变化
		onChange(event) {
			console.log(event.detail);
			this.val = event.detail;
			console.log(this.val);
			console.log(this.$store.state.shopCart);
			this.$store.state.shopCart.forEach((item, index) => {
				item.count = this.val;
			});
		}
	},
	mounted() {
		this.list = this.$store.state.shopCart;
		console.log(this.list.length);
		// 徽章的数字
		this.$store.commit('setBadge',this.list.length);
		console.log(this.$store.state.sname);
	},
	computed: {
		totalPrice: function() {
			return this.list.reduce((pre, v) => {
				return pre + v.price * v.count;
			}, 0);
		},
		pic_icon() {
			console.log(this.icon_visible);
			return this.icon_visible
				? '/static/image/select.png'
				: '/static/image/selected.png';
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ececec;
}
// 信息部分
.info {
	width: 70%;
	// margin: 20rpx;

	> text {
		display: block;
		font-family: '微软雅黑';
	}
	> text:first-child {
		font-size: 28rpx;
		font-weight: bold;
		margin: 10rpx 0 10rpx 0;
	}
	> text:nth-child(2) {
		font-size: 25rpx;
		color: #8e8e8e;
		margin: 10rpx 0 10rpx 0;
	}
	> view {
		display: flex;
		justify-content: space-between;
		> text {
			font-size: 15px;
			color: #e75f47;
		}
	}
}
.shopcart {
	width: 95%;
	height: 280rpx;
	margin: auto;
	border-radius: 6rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-around;
}
// 选择图标部分
.select {
	width: 15%;
	line-height: 280rpx;
	margin-right: 20rpx;
	text-align: center;
	> image:first-child {
		width: 40rpx;
		height: 40rpx;
		margin: 20rpx;
	}
}
.img {
	width: 23%;
	margin: 0 auto;
	line-height: 280rpx;
	display: flex;
	margin-right: 12rpx;
	margin-bottom: 16rpx;
	text-align: center;
	> image {
		width: 100%;
		height: 68%;
		align-self: center;
	}
}
</style>
